<template>
  <div id="app">
    <h2>{{ $store.state.ModuleA.name }}</h2>
    <h2>{{ $store.getters.fullName }}</h2>
    <h2>{{ $store.getters.fullName2 }}</h2>
    <h2>{{ $store.getters.fullName3 }}</h2>
    <button @click="nameUpdate">同步修改名字</button>
    <button @click="AnameUpdate">异步修改名字</button>

    <h2>---------------------------</h2>
    <h2>{{ $store.state.info }}</h2>
    <button @click="infoUpdate">更新info</button>
    <button @click="aInfoUpdate">异步更新info</button>
    <h2>------------------------</h2>
    <h2>{{ message }}</h2>
    <!-- 用过$store.state 来获得store对象中的state中的共享数据 -->
    <h2>{{ $store.state.count }}</h2>
    <h2>{{ $store.getters.powerCount }}</h2>
    <h2>{{ $store.getters.getAge15 }}</h2>
    <h2>{{ $store.getters.getAge15Num }}</h2>
    <!-- 传入参数 -->
    <h2>{{ $store.getters.getAge(17) }}</h2>
    <h2>------------</h2>
    <!-- <hello-vuex :count="count" /> -->
    <hello-vuex />
    <!-- 如果向修改vuex中的共享数据, 可以通过 $store.state修改, 但是官方不建议, 不推荐, 不允许这样修改 -->
    <!-- <button @click="$store.state.count++">+</button>
    <button @click="$store.state.count--">-</button> -->

    <!-- 官方建议这样来修改vuex中的共享数据 -->
    <button @click="addtion">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
  </div>
</template>

<script>
import HelloVue from "./components/HelloVuex";
import HelloVuex from "./components/HelloVuex";
import {
  INCREMENT,
  DECREMENT,
  INCREMENT_COUNT,
  ADD_STUDENT,
  INFO_UPDATE,
  A_INFO_UPDATE,
} from "./store/event-type";

export default {
  name: "App",
  components: {
    HelloVuex,
  },
  data() {
    return {
      message: "xiaoLam",
      // count: 0,
    };
  },
  methods: {
    addtion() {
      // 这里并不是直接使用 this.$store.mutation.increment() 来执行increment这个方法
      // 而是用 this.$store.commit("方法名") 来提交要使用的方法
      this.$store.commit(INCREMENT);
    },
    subtraction() {
      this.$store.commit(DECREMENT);
    },
    addCount(count) {
      // 普通的提交风格
      // this.$store.commit("incrementCount", count);

      // 一个包含type属性的对象提交风格
      this.$store.commit({
        type: INCREMENT_COUNT, // type属性, 值为 "事件类型"
        count, // 后面跟的是需要传入的参数
      });
    },
    addStudent() {
      const student = { id: 115, name: "wuming", age: 40 };
      this.$store.commit(ADD_STUDENT, student);
    },
    infoUpdate() {
      this.$store.commit(INFO_UPDATE);
    },
    aInfoUpdate() {
      // 提交给actions 要用 dispatch 而不是commit
      // commit是提交给mutations的
      // this.$store.dispatch(A_INFO_UPDATE);
      // 第一种方式: 通过传入一个函数, 在异步操作完成后进行回调
      /* this.$store.dispatch({
        type: A_INFO_UPDATE,
        message: "你好你好",
        finsh() {
          console.log("完成了");
        },
      }); */
      // 第二种方式: 通过 Promise 对象
      this.$store
        .dispatch({
          type: A_INFO_UPDATE,
          message: "你好你好",
        })
        .then((data) => {
          console.log(data);
        });
    },
    nameUpdate() {
      this.$store.commit("nameUpdate", "lisi");
    },
    AnameUpdate() {
      this.$store.dispatch("AnameUpdate", "wangwu");
    },
  },
};
</script>

<style>
</style>
